import { View, Image, Button, ScrollView, Text } from "@tarojs/components";
import { Component, ReactNode } from "react";
import { AtList, AtListItem, AtSearchBar } from "taro-ui";
import i1 from "./images/i1.png";
import "./index.scss";
import Req from "../../utils/request";
import { getInfo } from "../../utils/auth";
export default class BondFutures extends Component {
  state = {
    value: "",
    currentPage: 1,
    loading: false,
    hasMore: true,
    total: 0,
    list: [],
  };
  onChange = (val: string) => {
    this.setState({
      value: val,
    });
  };
  onActionClick = () => {
    this.setState({
      currentPage:1,
      hasMore: true,
      list: [],
    },() => {
      this.loadData()
    })
  };
  onClear = () => {
    this.setState({
      value:""
    },() => {
      this.onActionClick()
    })
  }
  componentDidMount(): void {
    this.loadData();
  }
  handleAdd = () => { };
  loadData = () => {
    const { currentPage, list, total, value } = this.state;
    const user_info = getInfo();

    this.setState({
      loading: true,
    });
    Req.get("/project/AppInfo", {
      title: value,
      userId:user_info.userId,
      pageNum: currentPage,
      pageSize: 10,
    }, {
      loading: false
    })
      .then((r) => {
        if (r.total - list.length === 0 || r.rows.length < 10) {
          this.setState({
            hasMore: false,
          });
        }
        this.setState({
          total: r.total,
          list: list.concat([...r.rows] as any),
          currentPage: currentPage + 1,
          loading: false,
        });
      })
      .catch((e) => {
        this.setState({
          loading: false,
        });
      });
  };
  onScrollDetchEnd = () => {
    const { loading } = this.state;
    if (loading) return;

    if (this.state.hasMore) {
      this.loadData();
    } else {
      this.setState({
        loading: false,
      });
    }
  };
  formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  render(): ReactNode {
    return (
      <View className="bf-container">
        <View className="top-header">
          <AtSearchBar
            className="em-search-bar"
            value={this.state.value}
            onChange={this.onChange}
            onClear={this.onClear}
            onActionClick={this.onActionClick}
          />
        </View>
        <ScrollView
          enhanced
          showScrollbar={false}
          onScrollToLower={this.onScrollDetchEnd}
          scrollY
          className="bf-list"
        >
          <AtList>
            {this.state.list.map((item: any, index) => (
              <AtListItem
                className="no-arrow-space"
                key={index}
                title={
                  <View className="bf-list-title">
                    <Text className="bf-list-t1">{item.year}</Text>
                    <Text className="bf-list-t2 bf-list-t2-center">
                      金额丨
                      <Text className="bf-list-t3">{item.fund ?? ""}</Text>
                    </Text>
                    <Text className="bf-list-t2">
                      年付息数丨
                      <Text className="bf-list-t3">{item.rateAmount}</Text>
                    </Text>
                  </View>
                }
                note={
                  <View className="bf-list-note">
                    <Text className="bf-list-note-t1">{item.title}</Text>
                    <Text className="bf-list-note-t2">{this.formatDate(new Date(item.createTime))}</Text>
                  </View>
                }
              />
            ))}
          </AtList>
          <View className="em-center-text">
            <Text>{this.state.hasMore ? "加载中..." : "没有更多了"}</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}
